<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>


  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <i class="iconfont icon-queren"></i>
            已阅读并同意<i>《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button type="submit" class="submit">下一步</button>

          </div>
        </form>
      </div>
    </div>
  </div>




  <script>
    let card = document.querySelector('.xtx-card')
    let code = document.querySelector(".code")
    let i =document.querySelector(".pl50 .iconfont")
    let password = ''
    let falg=[false,false,false,false,false,false]

    card.addEventListener("keydown",function(e){
      if(e.key===" "){
        e.preventDefault();
      }
    })



    //表单验证
    card.addEventListener('focusout', function (e) {
      if (e.target.tagName === 'INPUT') {
        let a = document.querySelector(`[data-prop="${e.target.name}"] .msg`)
        switch (e.target.name) {
          case 'username':
            a.innerHTML = ''
            if (e.target.value==" ") {
              a.innerHTML = '不可为空'
              
            }else{
              falg[0] = true
            }
            break;
          case 'phone':
          a.innerHTML = ''
            if (!(/^1\d{10}$/.test(e.target.value))) {
              a.innerHTML = '输入正确的手机号码'
            }else{
              falg[1] = true
            }
            
            break;
          case 'code':
            a.innerHTML = ''
            if (e.target.value==" ") {
              a.innerHTML = '不可为空'
              
            }else{
              falg[2] = true
            }
            break;
          case 'password':
            a.innerHTML = ''
            if (!(/^[0-9a-zA-Z!@#$%^&*()_+}{:"|?><"}]{6,20}$/.test(e.target.value))) {
              a.innerHTML = '请设置6至20位密码'
              
            }else{
              password = e.target.value
              falg[3] = true
            }
            break;
          case 'confirm':
            a.innerHTML = ''  
            if (password != e.target.value) {
              a.innerHTML = '两次不同'
              
            }else{
              falg[4] = true
            }
            break;
        }

      }
    })

    //验证码
    code.addEventListener('click', function (e) {
      let can_click = true
      e.preventDefault()
      let s = 5
      if (can_click) {
        can_click = false
        code.innerHTML = `(${s})`
        let time = setInterval(function () {
          s--
          code.innerHTML = `(${s})`
          if (s == 0) {
            code.innerHTML = `发送验证码`
            can_click = true
            clearInterval(time)
          }
        }, 1000)
      }
    })



    //同意勾选样式
    i.addEventListener('click', function () {
      i.classList.toggle('icon-queren2')
      if (i.classList.contains('icon-queren2')){
        falg[5] = true
      }
    })


    //表单提交
    document.querySelector('.xtx-form-item button').addEventListener('click', function (e) {
      if (falg.every(falg=>falg)) {
        alert('已提交')
      } else {
        e.preventDefault()
        return alert('请检查表单')
      }
    })


  </script>
</body>

</html>